import React from 'react';
// import './ex.less';
import style from './aa.module.css';
import styleb from './bb.module.less';
console.log(styleb);

export default function CSSInJS() {
  return (
    <div>
      {/* 在a页面使用了一个 left class */}

      {/* 可能在b页面也使用 left class */}
      <div className="login"></div>
      {/* 此时会造成多个页面的样式冲突， 有一个专门 解决方案 ： CSS in JS */}
      {/* 把css 作为 js的 模块导入 */}
      {/* import style from 'xxx.module.css' */}
      {/* 然后在使用 样式的时候 ， 通过 style.xxx 来起类名 */}
      <div className={style.login}></div>
      <div className={style['login-left']}></div>
    </div>
  );
}
